<template>
  <view class="page-root bg-white pb-120">
    <up-swiper
      :list="list"
      @click="click"
      height="750rpx"
      @change="swiperChange">
      <template #indicator>
        <view class="indicator-num">
          <text class="indicator-num__text"
            >{{ currentNum + 1 }}/{{ list.length }}</text
          >
        </view>
      </template>
    </up-swiper>
    <view class="mt-56 mx-30">
      <view class="text-34 color-#333">伤口拆线（1-5针）</view>
      <view class="color-#FF2424 text-36 font-500 my-26">￥155.00起</view>
      <view class="text-26 color-#999">创面清理 | 更换敷料</view>
      <view class="mt-40 mb-30"
        ><up-gap height="1" bgColor="#e6e6e6"></up-gap
      ></view>
      <view
        class="flex justify-between items-center"
        @click="ggVisabled = true">
        <view
          class="border-1rpx border-#ff2424 border-solid rd-10rpx color-#ff2424 px-12rpx text-24 lh-48rpx"
          >拆线(1-5针 )含耗材 | ¥155.00</view
        >
        <view class="text-24 color-#999">6款可选 ></view>
      </view>
      <view class="my-30"><up-gap height="1" bgColor="#e6e6e6"></up-gap></view>
      <view>
        <view class="bg-white rd-2 box-border flex">
          <u-image
            :src="$sc.loadImg('banner.png')"
            width="120rpx"
            height="120rpx"
            shape="circle"></u-image>
          <view class="flex-1 ml-30">
            <view class="color-#333 text-30"> 寿光皮肤病医院 </view>
            <view class="text-24 color-#999 my-16">
              山东省潍坊市寿光市圣城街道皮肤病医院
            </view>
          </view>
          <view>
            <view class="text-24 color-#999"> 1.6km </view>
          </view>
        </view>
        <view class="my-30"
          ><up-gap height="1" bgColor="#e6e6e6"></up-gap
        ></view>
        <view class="flex">
          <view class="mx-18">
            <u-image
              :src="$sc.loadImg('yyicon1.png')"
              width="83rpx"
              height="83rpx"></u-image>
            <view class="text-20 color-#333 mt-22">预约上门</view>
          </view>
          <view class="h-83 flex items-center">
            <u-image
              :src="$sc.loadImg('arrow.png')"
              width="30rpx"
              height="21rpx"></u-image>
          </view>
          <view class="mx-18">
            <u-image
              :src="$sc.loadImg('yyicon2.png')"
              width="83rpx"
              height="83rpx"></u-image>
            <view class="text-20 color-#333 mt-22">评估指导</view>
          </view>
          <view class="h-78 flex items-center">
            <u-image
              :src="$sc.loadImg('arrow.png')"
              width="30rpx"
              height="21rpx"></u-image>
          </view>
          <view class="mx-18">
            <u-image
              :src="$sc.loadImg('yyicon3.png')"
              width="83rpx"
              height="83rpx"></u-image>
            <view class="text-20 color-#333 mt-22">专项操作</view>
          </view>
          <view class="h-78 flex items-center">
            <u-image
              :src="$sc.loadImg('arrow.png')"
              width="30rpx"
              height="21rpx"></u-image>
          </view>
          <view class="mx-18">
            <u-image
              :src="$sc.loadImg('yyicon4.png')"
              width="83rpx"
              height="83rpx"></u-image>
            <view class="text-20 color-#333 mt-22">专项记录</view>
          </view>
          <view class="h-78 flex items-center">
            <u-image
              :src="$sc.loadImg('arrow.png')"
              width="30rpx"
              height="21rpx"></u-image>
          </view>
          <view class="mx-18">
            <u-image
              :src="$sc.loadImg('yyicon5.png')"
              width="83rpx"
              height="83rpx"></u-image>
            <view class="text-20 color-#333 mt-22">完成评价</view>
          </view>
        </view>
        <view class="my-30"
          ><up-gap height="1" bgColor="#e6e6e6"></up-gap
        ></view>
        <view class="flex justify-between">
          <view class="flex items-baseline">
            <view class="color-#333 text-30">服务评价</view>
            <view class="text-24 color-#999 ml-16">1000+</view>
          </view>
          <view class="text-24 color-#999" @click="$u.route('/pagesA/pj/index')"
            >查看更多 ></view
          >
        </view>
        <view class="mt-30">
          <view class="flex">
            <u-image
              :src="$sc.loadImg('banner.png')"
              width="70rpx"
              shape="circle"
              height="70rpx"></u-image>
            <view class="ml-24">
              <view class="text-30 color-#333">李媛媛</view>
              <view class="flex text-26 color-#999">
                <view class="mr-10">2025.07.19</view>
                <view
                  ><up-rate
                    :count="5"
                    v-model="star"
                    active-color="#eebc31"></up-rate
                ></view>
              </view>
            </view>
          </view>
          <view class="color-#333 text-30 py-40"
            >医生回答的非常细致，很好的解决了我的问题，让我 没那么担心。</view
          >
        </view>
      </view>
    </view>
    <view class="bg-#f5f5f5 h-100 center">
      <view class="flex">
        <u-image
          :src="$sc.loadImg('heart.png')"
          width="26rpx"
          height="26rpx"></u-image>
        <view class="ml-18 text-26 color-#666">上门详情</view>
      </view>
    </view>
    <view class="bottom-btns">
      <view class="flex items-center">
        <u-image
          :src="$sc.loadImg('hospatil.png')"
          width="35rpx"
          height="35rpx"></u-image>
        <view class="color-#666 text-26 ml-15">医院</view>
      </view>
      <view class="flex items-center ml-30">
        <u-image
          :src="$sc.loadImg('cart.png')"
          width="36rpx"
          height="36rpx"></u-image>
        <view class="color-#666 text-26 ml-15">购物车</view>
      </view>
      <view class="flex ml-20">
        <view class="cart-btn">加入购物车</view>
        <view class="buy-btn">立即购买</view>
      </view>
    </view>
    <u-popup
      :show="ggVisabled"
      :closeable="true"
      mode="bottom"
      round="30rpx"
      @close="ggVisabled = false">
      <view class="p-32 h-60vh overflow-auto">
        <view class="flex">
          <u-image
            :src="$sc.loadImg('banner.png')"
            width="200rpx"
            height="200rpx"></u-image>
          <view class="flex-1 ml-20">
            <view class="color-#222 text-32 font-bold">伤口拆线（1-5针）</view>
            <view class="text-26 color-#999">创面清理 | 更换敷料</view>
            <view class="color-#FF2424 text-32">
              <text class="text-22">￥</text>
              155.00</view
            >
          </view>
        </view>
        <view class="text-28 color-#333 my-40">类型</view>
        <view style="height: calc(60vh - 400rpx); overflow: scroll">
          <view v-for="item in 10" :key="item" class="lx-item">
            拆线(6-10针)含耗材 ¥155.00
          </view>
        </view>
        <view class="flex gap-2">
          <u-button
            type="primary"
            color="#24C568"
            text="加入购物车"
            shape="circle"
            plain></u-button>
          <u-button
            type="primary"
            shape="circle"
            color="#24C568"
            text="立即购买"></u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup>
const currentNum = ref(0);
const list = reactive([
  "https://file.sdbly.cn/nurse/static/banner.png",
  "https://file.sdbly.cn/nurse/static/indexbg.png",
  "https://file.sdbly.cn/nurse/static/mybg.png",
]);
const star = ref(4);
const swiperChange = (e) => {
  console.log("e: ", e);
  currentNum.value = e.current;
};
const ggVisabled = ref(false);
</script>

<style lang="scss" scoped>
.indicator-num {
  padding: 2px 0;
  background-color: rgba(0, 0, 0, 0.35);
  border-radius: 100px;
  width: 35px;
  @include flex;
  justify-content: center;

  &__text {
    color: #ffffff;
    font-size: 12px;
  }
}
.lx-item {
  margin-bottom: 20rpx;
  background-color: #f7f7f7;
  display: inline-block;
  border-radius: 30rpx;
  font-size: 28rpx;
  color: #434343;
  padding: 16rpx 30rpx;
}
.bottom-btns {
  position: fixed;
  width: 100%;
  height: 98rpx;
  background-color: #fff;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding: 16rpx 30rpx;
  border-top: 1rpx solid #e6e6e6;
  box-sizing: border-box;
  .cart-btn {
    width: 200rpx;
    height: 70rpx;
    background: #ccffe2;
    border-radius: 35rpx 0 0 35rpx;
    color: #24c568;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .buy-btn {
    width: 200rpx;
    height: 70rpx;
    background: #24c568;
    border-radius: 0 35rpx 35rpx 0;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
